<template>
    <div>
        <div class="hospital-detail-box clearfix">
            <div class="hospital-detail clearfix b-g-f">
                <img :src="hospital.logo" alt="">
                <span class="hospital-name">{{hospital.name}}</span>
                <span class="hospital-tou">简介：</span>
                <span class="hospital-content" v-if="xiala" v-html="hospital.content"></span>
                <span class="hospital-content1" v-else v-html="hospital.content"></span>
                <span class="hospital-xiala" v-if="xiala" @click="xiala = !xiala">
                    展开
                    <img class="xiala" src="../../../static/img/xiala.png" alt="">
                </span>
                <span class="hospital-xiala" v-else  @click="xiala = !xiala">
                    收起
                    <img class="xiala" src="../../../static/img/shangla.png" alt="">
                </span>
            </div>
        </div>
        <div class="hospital-talent clearfix b-g-f">
            <span class="talent-team">营养团队</span>
            <div class="row-col clearfix">
                <van-row gutter="8">
                    <van-col span="8" v-for="(item,index) in hospital.dietitians" :key="index">
                        <router-link tag="div" :to="{name:'dietitian',query:{id:item.dietitian_id}}">
                            <img :src="item.avatar" alt="">
                            <span class="talent-name">{{item.dietitian_name}}<em class="talent-title">营养师</em></span>
                        </router-link>
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            xiala:true,
            hospital:{}
        }
    },
    mounted(){
        this.hospitalIndex()
    },
    methods:{
        hospitalIndex(){
            this.$api.dealers.hospitalIndex({id:this.$route.query.id}).then(resp=>{
                if(resp.code == 1){
                    this.hospital = resp.data
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.hospital-detail-box{
    margin: 30px 40px;
    .hospital-detail{
        border-radius: 10px;
        padding: 30px;
        .hospital-name{
            color: #999;
            font-size: 34px;
            text-align: center;
            height: 60px;
            line-height: 60px;
            display: block;
        }
        .hospital-tou{
            display: block;
            text-align: left;
            font-size: 44px;
            height: 60px;
            line-height: 50px;
            font-weight: bold;
        }
        .hospital-content{
            width: 100%;
            display: block;
            text-align: justify;
            font-size: 36px;
            color: #666;
            line-height: 55px;
            text-indent: 80px;
            overflow: hidden;
            text-overflow:ellipsis;//文本溢出显示省略号
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
        .hospital-content1{
            width: 100%;
            display: block;
            text-align: justify;
            font-size: 36px;
            color: #666;
            line-height: 55px;
            text-indent: 80px;
            overflow: hidden;
            text-overflow:ellipsis;//文本溢出显示省略号
            display: -webkit-box;
            -webkit-line-clamp: 0;
            -webkit-box-orient: vertical;
        }
        .hospital-xiala{
            padding-top: 30px;
            display: block;
            color: #56a0ea;
            text-align: right;
            font-size: 34px;
            .xiala{
                width: 27px;
            }
        }
    }
}
.hospital-talent{
    border-radius: 10px;
    margin: 30px 40px;
    padding: 30px 20px 0 20px;
    .talent-team{
        font-size: 40px;
        font-weight: bold;
        display: block;
    }
    .row-col{
        padding-top: 30px;
        .talent-name{
            padding-bottom: 30px;
            display: block;
            text-align: center;
            font-size: 40px;
            color: #666;
            .talent-title{
                color: #999;
                font-size: 32px;
                padding-left: 5px;
            }
        }
    }
}
</style>
